<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旋转放大</title>
		<style>
			#p1 {
				transition: all 1s;
			}
		</style>
	</head>

	<body>
		<input type="button" value="放大" onclick="big()" />
		<input type="button" value="缩小" onclick="small()" />
		<input type="button" value="旋转" onclick="zhuan()" />
		<hr />
		<img src="img/human.jpg" id="p1" onclick="huan()" width="200" />
		<script>
			var dushu=0;
			var zhuan = function() {
				dushu=dushu+360;
				p1.style.transform="rotate("+dushu+"deg)";

				
			};
			var big = function() {
				p1.width = p1.width * 1.2;
			};
			var small = function() {
				p1.width = p1.width * 0.9;
			};
			var huan = function() {
				p1.src = "img/cry.gif";
			};
		</script>
	</body>

</html>